<template>
	<view class="z-card px-24 py-12">
		<view class="fd-r">
			<text class="w-160 fs-28">收货人:</text>
			<view class="flex1">
				<input
					class="py-16 fs-28"
					type="text"
					v-model="form.name"
					placeholder="请输入"
				/>
				<view class="divider"></view>
			</view>
		</view>
		<view class="fd-r">
			<text class="w-160 fs-28"></text>
			<view class="flex1">
				<view class="py-8">
					<tm-radio-group model="button" v-model="form.gender">
						<tm-radio
							value="男"
							label="先生"
							color="red"
							:size="24"
							:round="12"
						></tm-radio>
						<tm-radio
							value="女"
							label="女士"
							color="red"
							:size="24"
							:round="12"
						></tm-radio>
					</tm-radio-group>
				</view>
			</view>
		</view>
		<view class="fd-r">
			<text class="w-160 fs-28">手机号:</text>
			<view class="flex1">
				<input
					class="py-16 fs-28"
					type="number"
					v-model="form.phone"
					placeholder="请输入"
				/>
				<view class="divider"></view>
			</view>
		</view>
		<view class="fd-r">
			<text class="w-160 fs-28">详细地址:</text>
			<view class="flex1">
				<view class="fd-r">
					<view class="flex1 fd-c ai-s mr-24">
						<text v-if="form.province" class="mt-16 fs-28">
							{{ form.province }}-{{ form.city }}-{{ form.area }}
						</text>
						<textarea
							class="py-16 w-400 h-100 fs-28"
							type="number"
							v-model="form.address"
							placeholder="请输入"
						/>
					</view>
					<tm-icon
						name="tmicon-md-pin"
						:fontSize="48"
						color="grey"
						@click="HGetMap"
					></tm-icon>
				</view>
				<view class="divider"></view>
			</view>
		</view>
		<view class="fd-r">
			<text class="w-160 fs-28">设为默认:</text>
			<view class="flex1 py-16">
				<tm-switch
					v-model="form.isDefault"
					:defaultValue="form.isDefault"
					:round="20"
					size="normal"
					color="red"
					:margin="[12, 0]"
				></tm-switch>
			</view>
		</view>
	</view>

	<view class="px-24 pt-24">
		<button class="btn-red" @click="HCheck">保存</button>
	</view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const form = ref({
	name: '',
	phone: '',
	gender: '男',
	province: '',
	city: '',
	area: '',
	address: '',
	longitude: '',
	latitude: '',
	isDefault: true
});

onLoad(() => {
	const instance = getCurrentInstance().proxy;
	const eventChannel = instance.getOpenerEventChannel();
	eventChannel.on('address-edit', function (data) {
		form.value = data;
	});
});

const extractProvinceCityDistrict = (address) => {
	// 假设地址的格式为 "省份 街道市 县/区 具体地址"
	// 以下正则表达式用于匹配 "省份"、"市"、"区/县"
	const regex = /^(.*?省)?(.*?市)?(.*?(区|县))?(.*)$/;
	const match = address.match(regex);

	if (match) {
		// match[1] 是省份，match[2] 是市，match[3] 是区/县
		// 以下代码移除掉匹配到的字符串中的 "省"、"市"、"区/县" 后的空格
		return {
			province: match[1] ? match[1].replace(/省$/, '') : undefined,
			city: match[2] ? match[2].replace(/市$/, '') : undefined,
			district: match[3]
				? match[3].replace(/区$/, '').replace(/县$/, '')
				: undefined
		};
	} else {
		return {
			province: undefined,
			city: undefined,
			district: undefined
		};
	}
};

const HGetMap = () => {
	uni.chooseLocation({
		success: (res) => {
			const address = res.address;
			const { province, city, district } =
				extractProvinceCityDistrict(address);
			form.value.province = `${province}省`;
			form.value.city = `${city}市`;
			form.value.area = `${district}区`;
			form.value.address = res.name;
			form.value.longitude = res.longitude;
			form.value.latitude = res.latitude;
			console.log('HGetMap', res);
		},
		fail: (err) => {
			console.error('err', err);
		}
	});
};

const HCheck = () => {
	if (!form.value.name) {
		uni.showToast({
			title: '请输入姓名',
			icon: 'none'
		});
		return false;
	}
	if (!form.value.phone) {
		uni.showToast({
			title: '请输入手机号',
			icon: 'none'
		});
		return false;
	}
	if (!uni.$tm.u.isPhone(form.value.phone)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		});
		return false;
	}
	if (!form.value.area) {
		uni.showToast({
			title: '请在地图选择准确位置',
			icon: 'none'
		});
		return false;
	}
	if (!form.value.address) {
		uni.showToast({
			title: '请输入详细地址',
			icon: 'none'
		});
		return false;
	}

	HSubmit();
};

import addressApi from '@/api/addressApi.js';
const HSubmit = () => {
	addressApi.submit(form.value).then((res) => {
		uni.navigateBack();
		uni.$emit('address-add-back');
	});
};
</script>

<style></style>
